<template>
  <div class="studioDiseaseMgt padding_20">
    <el-input v-model="name"
              placeholder="请输入病种名称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <element-table class="mt-20"
                   :columns="columns"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:nickName="{row}">
        <span v-if="row.doctorDto">{{row.doctorDto.nickName}}</span>
        <span v-else>系统创建</span>
      </template>
      <template v-slot:status="{row}">
        <el-tag type="success"
                v-if="row.status === 0">待审核</el-tag>
        <el-tag type="danger"
                v-if="row.status === 1">审核通过</el-tag>
        <el-tag type="primary"
                v-if="row.status === -1">已驳回</el-tag>
      </template>
      <template v-slot:option="{row}">
        <el-button type="success"
                   v-if="row.status === 1">已通过</el-button>
        <el-button type="success"
                   v-if="row.status === -1">已驳回</el-button>
        <div v-if="row.status === 0">
          <el-button type="danger"
                     @click="handleRowClick(row, 1)">通过</el-button>
          <el-button type="primary"
                     @click="handleRowClick(row, -1)">驳回</el-button>
        </div>
      </template>
    </element-table>
  </div>
</template>

<script>
  import elementTable from '@/base/ElementTable'
  import Vue from 'vue'
  export default {
    name: "studioDiseaseMgt",
    data () {
      return {
        loading: false,
        pageTotal: 0,
        pageIndex: 1,
        pageSize: 20,
        columns: [
          {
            label: '创建人',
            prop: 'nickName',
            isSlot: true
          },
          {
            label: '病种名称',
            prop: 'name'
          },
          {
            label: '状态',
            prop: 'status',
            align: 'center',
            isSlot: true
          },
          {
            label: '创建时间',
            prop: 'createTime',
            align: 'center',
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            },
          },
          {
            width: 180,
            label: '操作',
            prop: 'option',
            isSlot: true
          }
        ],
        tableData: [],
        name: ''
      }
    },
    created () {
      this._getList();
    },
    methods: {
      handleQuery () {
        this.pageIndex=1
        this._getList();
      },
      _getList () {
        this.loading = true;
        let param = {
          name: this.name,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex - 1
        };
        this.post(this.api.wdStudioTypeListAll.url, param).then((res) => {
          if (res.data.code === '200') {
            this.loading = false;
            let resData = res.data.object;
            if (Object.keys(resData).length > 0) { // 后台较坑，没数据时，返回的空对象
              this.tableData = res.data.object;
              this.pageTotal = res.data.totalNum;
            } else {
              this.tableData = [];
            }
          }
        })
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page;
        this._getList();
      },
      // 操作
      handleRowClick (row, status) {
        let statusText = status === 1 ? '通过' : '驳回';
        this.$confirm(`确认${statusText}？`)
          .then(async _ => {
            this.post(this.api.wdStudioTypeChangeStatus.url, {
              id: row.id,
              status: status
            }).then(res => {
              if (res.data.code === '200') {
                this.$message.success(`${statusText}成功!`);
                this._getList();
              }
            })
          })
          .catch(_ => { });
      },
    },
    components: {
      'element-table': elementTable
    }
  }
</script>
<style lang="scss" scoped>
</style>
